<template>
  <div v-if="type == 1" style="width: 100%">
    <h2 class="cate" style="font-size: 24px; color: var(#303133)">
      选择商品分类
    </h2>
    <!--      类别菜单-->
    <span>
      <b>
        <a
          href="#"
          @click.prevent="load(0)"
          :class="{
            black: categoryId == 0,
            grey: categoryId != 0,
          }"
        >
          <span
            class="classify-item"
            :class="
              [0, '', null, undefined].includes(activeIndex) ? 'active' : ''
            "
          >
            全部</span
          >
        </a>
      </b>
    </span>
    <el-row :gutter="20" style="font-size: 18px">
      <el-col v-for="(item, index) in icons" :key="index" :span="6">
        <i class="iconfont" v-html="item.value"></i>
        <span v-for="(category, index2) in item.categories" :key="index2">
          <b>
            <a
              href="#"
              @click.prevent="load(category.id)"
              :class="{
                black: categoryId == category.id,
                grey: categoryId != category.id,
              }"
            >
              <span
                class="classify-item"
                :class="activeIndex == category.id ? 'active' : ''"
              >
                {{ category.name }}</span
              >
            </a>
          </b>
          <span v-if="index2 != item.categories.length - 1"> / </span>
        </span>
      </el-col>
    </el-row>
    <hr />
  </div>
  <div v-else-if="type == 2" style="width: 100%">
    <el-collapse v-model="activeNames">
      <el-collapse-item
        :title="activeNames.includes('1') ? '收起分类' : '展开分类'"
        name="1"
      >
        <el-row :gutter="20" style="font-size: 16px">
          <span style="margin-left: 20px">
            <b>
              <a
                href="#"
                @click.prevent="load(0)"
                :class="{
                  black: categoryId == 0,
                  grey: categoryId != 0,
                }"
              >
                <span
                  class="classify-item"
                  :class="
                    [0, '', null, undefined].includes(activeIndex)
                      ? 'active'
                      : ''
                  "
                >
                  全部</span
                >
              </a>
            </b>
          </span>
          <div
            class="icon-classify"
            v-for="(item, index) in icons"
            :key="index"
          >
            <div class="classify-title">{{ item.name }}:</div>
            <div class="classify-item2">
              <div
                class="classify-child"
                :class="activeIndex == category.id ? 'active2' : ''"
                @click.prevent="load(category.id)"
                v-for="(category, index2) in item.categories"
                :key="index2"
              >
                {{ category.name }}
              </div>
            </div>
          </div>
        </el-row>
        <hr />
      </el-collapse-item>
    </el-collapse>
  </div>
  <div v-else-if="type == 3" style="width: 100%">
    <span style="margin-left: 10px">
      <b>
        <a
          href="#"
          @click.prevent="load(0)"
          :class="{
            black: categoryId == 0,
            grey: categoryId != 0,
          }"
        >
          <span
            class="classify-item"
            :class="
              [0, '', null, undefined].includes(activeIndex) ? 'active' : ''
            "
          >
            全部</span
          >
        </a>
      </b>
    </span>
    <el-row :gutter="20" style="font-size: 16px">
      <div class="icon-classify" v-for="(item, index) in icons" :key="index">
        <div class="classify-title">{{ item.name }}:</div>
        <div class="classify-item2">
          <div
            class="classify-child3"
            :class="activeIndex == category.id ? 'active3' : ''"
            @click.prevent="load(category.id)"
            v-for="(category, index2) in item.categories"
            :key="index2"
          >
            {{ category.name }}
          </div>
        </div>
      </div>
    </el-row>
    <hr />
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    icons: {
      type: Array,
      default: () => {
        return [];
      },
    },
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      activeIndex: 0,
      categoryId: null,
      activeNames: [],
    };
  },
  methods: {
    load(id) {
      this.$emit("load", id == 0 ? "" : id);
    },
  },
  components: {},
  created() {
    this.categoryId = this.$route.query.categoryId;
    this.activeIndex = this.$route.query?.categoryId;
  },
  computed: {},
  watch: {
    $route(value) {
      this.activeIndex = value.query?.categoryId;
    },
  },
};
</script>
<style scoped lang="less">
.active {
  color: var(--color-1);
}
.black {
  color: var(--classify-title-select);
}

.grey {
  color: var(--classify-title);
}
.classify-item:hover {
  color: var(--color-1);
}
.classify-item2 {
  display: flex;
  flex-direction: row;
}
.classify-child {
  margin-right: 10px;
  cursor: pointer;
  padding: 5px 10px;
}
.icon-classify {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 36px;
  margin-left: 20px;
}
.classify-title {
  font-weight: bold;
  margin-right: 10px;
  color: var(--color-5);
}
.active2 {
  background-color: var(--color-1);
  color: var(--color-7);
  border-radius: 6px;
}
.active3 {
  color: var(--color-1);
}
.classify-child3 {
  cursor: pointer;
  padding: 5px 10px;
  &:hover {
    color: var(--color-1);
  }
}
</style>
